<template lang="">
  <div>
    <el-alert
    style="margin-bottom: 20px;"
      title="提醒:竞拍保证金不计入货款，交易完成后将在1-3个工作日原路退还"
      type="warning">
    </el-alert>
    <el-table
      :data="orderListTableData"
      border
      :header-cell-style="{'text-align':'center',background:'#F2F2F2'}"
      :cell-style="{'text-align':'center'}">
      <el-table-column
        prop="orderNumber"
        label="订单编号">
      </el-table-column>
      <el-table-column
        prop="productName"
        label="竞品名称"
        width="250">
      </el-table-column>
      <el-table-column
        prop="quantity"
        label="数量"
        width="110">
      </el-table-column>
      <el-table-column
        prop="orderFlag"
        label="状态"
        width="100">
        <template slot-scope="scope">
          <span v-show="scope.row.orderFlag === 1">待付款</span>
          <span v-show="scope.row.orderFlag === 2">待发货</span>
          <span v-show="scope.row.orderFlag === 3">待收货</span>
          <span v-show="scope.row.orderFlag === 4">已完成</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="city"
        label="委托方"
        width="150">
      </el-table-column> -->
      <!-- <el-table-column
        prop=""
        label="委托联系人/方式">
      </el-table-column> -->
      <!-- <el-table-column
        prop="bidder"
        label="成交联系人/方式">
      </el-table-column> -->
      <el-table-column
        prop="deliveryPoints"
        label="交货地点"
        width="150">
      </el-table-column><el-table-column
        prop="strikeTime"
        label="成交时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="transactionTotal"
        label="成交金额/元"
        width="110">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="服务顾问"
        width="150">
        <template slot-scope="scope">
          <span v-show="scope.row.transactionTotal != ''">暂无</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="zip"
        label="提货函"
        width="150">
        <template slot-scope="scope">
          <span v-show="scope.row.transactionTotal != ''">暂无</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button v-show="a" @click="handleClick(scope.row)" type="danger" plain size="small">详情</el-button>
          <el-button v-show="b" @click="handleClick(scope.row)" type="danger" plain size="small">详情</el-button>
          <el-button v-show="b" @click="report(scope.row)" type="danger" plain size="small">报告</el-button>
          <el-button v-show="c" @click="confirmOrder(scope.row)" type="danger" plain size="small">确认订单</el-button>
        </template>
      </el-table-column>
    </el-table>
  <!-- 分页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="5"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total" style="margin-top: 20px;">
  </el-pagination>
  <el-dialog
    title="竞拍报告"
    width="58%"
    :visible.sync="innerVisible"
    append-to-body>
    <div style="width: 100%;">
      <p>
        1.本轮竞拍公告时间:<span style="color: red;">2019/03/27 09:00</span>结束于<span style="color: red;">2019/03/30 9:00</span>
        委托编号:<span style="color:#8ED6FF;">WT201903261245</span></p>
      <p>
        2.本轮竞拍开始时间:<span style="color: red;">2019/04/02 09:00</span>结束于<span style="color: red;">2019/03/30 9:00</span>
        期间拍品在平台浏览量<span style="color: red;">365</span>次,共<span style="color: red;">45</span>个采购企业报名,
        经过平台审核筛选最终入选<span style="color: red;">25</span>位优质企业参加;竞拍编号:
        <span style="color:#8ED6FF;">JP201903261245</span>
      </p>
      <p>
        起拍价<span style="color: red;">21561</span>元,共出价<span style="color: red;">151</span>次,加价幅度
        <span style="color: red;">1000</span>元,成交价<span style="color: red;">31561</span>
      </p>
      <p>
        <span style="color: red;">报告:ID45671 胜出方:江苏中泰机械加工有限公司,出价:4次,锁定成交价:31561,</span>
        订单编号:<span style="color:#8ED6FF;">D201904037654</span>
      </p>
      <el-table
        border
        :data="orderListTableData"
        :header-cell-style="{'text-align':'center',background:'#F2F2F2'}"
        :cell-style="{'text-align':'center'}"
        style="width: 96%;border: 1px solid black;">
        <el-table-column
          prop="date"
          label="服务类型"
          width="200">
        </el-table-column>
        <el-table-column
          prop="name"
          label="代理人"
          width="150">
        </el-table-column>
        <el-table-column
          prop="province"
          label="服务时间"
          width="200">
        </el-table-column>
        <el-table-column
          prop="city"
          label="服务内容"
          width="200">
        </el-table-column>
        <el-table-column
          prop="address"
          label="备注"
          width="279">
        </el-table-column>
      </el-table>
      <p>
        本次服务总共为您服务时长<span style="color: red;">48</span>小时、参与服务类型<span style="color: red;">17</span>项,
        参与服务人员数量<span style="color: red;">2</span>人/次
      </p>
    </div>
  </el-dialog>
  <el-dialog
    title="确认订单"
    width="45%"
    :visible.sync="innerVisible1"
    append-to-body>
    <div style="width: 100%;">
      <div style="width: 100%;height:100px;margin-top: -20px;">
        <div style="width: 60%;height:100px;float: left;">
          <p style="font-size: 14px;margin-top: 20px;">
            <span style="margin-right: 40px;">成交时间：{{MyOrderDetals.strikeTime}}</span>
            <span>订单编号：{{MyOrderDetals.orderNumber}}</span>
          </p>
          <p style="font-size: 14px;">竞品名称：{{MyOrderDetals.productName}}</p>
        </div>
        <div style="width: 40%;height:100px;float: left;font-size: 18px;">
          <div style="margin-top: 30px;">成交总额:<span style="font-size: 24px;color:red;">{{MyOrderDetals.transactionTotal}}</span>元</div>
        </div>
      </div>
      <div>
        <img class="announcement_img" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E5%85%AC%E5%91%8A%E8%AF%A6%E6%83%85/u1344.svg">
        <span>交易约定</span>
      </div>
      <div style="width: 100%;height:100px;margin-top:20px;">
        <div>
          <div class="xx">约定付款时间</div>
          <div class="xx1">{{MyOrderDetals.strikeTime}}</div>
          <div class="xx11">约定提货时间</div>
          <div class="xx1">{{MyOrderDetals.strikeTime}}</div>
        </div>
        <div>
          <div class="xx2">约定开票时间</div>
          <div class="xx22">{{MyOrderDetals.strikeTime}}</div>
        </div>
        <div>
          <div class="xx2">提货地址</div>
          <div class="xx22">{{MyOrderDetals.deliveryPoints}}</div>
        </div>
      </div>
      <div style="width: 100%;">
        <p>1、请您在24小时确认订单，否则视为违约，保证金赔付委托方!</p>
        <p>2、您已线下确认付款后，可下载打印提单，前往提货地址进行交割!</p>
      </div>
      <div style="border-top: 1px solid black;width: 856.34px;margin-left: -20px;"></div>
      <div style="margin-top: 10px;text-align:center;width: 100%;">
        <el-button type="info" style="background-color:red;border: none;width: 160px;" @click="updateRrderFlag()" v-show="MyOrderDetals.orderFlag === 1">确认订单</el-button>
        <el-button type="info" style="background-color:#CCCCCC;border: none;width: 160px;" disabled v-show="MyOrderDetals.orderFlag != 1">确认订单</el-button>
      </div>
    </div>
  </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      innerVisible1: false, // 点击确认订单弹窗
      innerVisible: false, // 点击报告弹窗
      c: true,
      a: false,
      b: false,
      currentPage4: 1, // 分页显示第几页
      pageRequest: { // 分页请求参数
        pageSize: 5, // 每页条数
        pageNum: 1 // 每页数量
      },
      userInfo: {}, // 用户信息
      total: 0, // 分页总条数
      orderListTableData: [{}], // 订单列表table表格存储数据
      clientAddress: {}, // 客户订单
      MyOrderDetals: {} // 查看订单（订单详情）
    }
  },
  mounted () {
    this.selectOrderListInfo() // 查询客户订单
  },
  methods: {
    // 确认订单：修改订单状态
    updateRrderFlag () {
      console.log(this.MyOrderDetals)
      this.$axios.post('myBid/updateMyOrderById', this.MyOrderDetals).then((res) => {
        if (res.data.code === '200') {
          this.$message({ message: '确认成功', type: 'success' })
        }
        this.innerVisible1 = false
      })
    },
    selectOrderListInfo () { // 查询客户订单
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.$axios.get('myBid/selectMyOrderById', { params: { bidder: this.userInfo.id, pageSize: this.pageRequest.pageSize, pageNum: this.pageRequest.pageNum } }).then((res) => {
        if (res.data.code === '200') {
          this.orderListTableData = res.data.obj.content
          this.total = res.data.obj.total
        }
      })
    },
    confirmOrder (row) { // 点击确认订单实现弹窗方法
      this.MyOrderDetals = row
      this.innerVisible1 = true
    },
    report () { // 点击报告颜色弹窗和内容
      this.innerVisible = true
    },
    handleClick (row) { // table表格中操作方法
      console.log(row)
    },
    handleSizeChange (val) { // 改变每页条数
      this.pageRequest.pageSize = val
      this.selectOrderListInfo() // 查询客户订单
    },
    handleCurrentChange (val) { // 改变当前页
      this.pageRequest.pageNum = val
      this.selectOrderListInfo() // 查询客户订单
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .announcement_img{
    margin-left: -10px;
    margin-right: 10px;
    transform: rotate(90deg);
  }
  .xinxi22{
    margin-left: 18px;
    width: 130px;
    height:30px;
    background-color:#fff;
    float: left;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
  }
  .xx22{
    width: 602px;
    height:30px;
    background-color:#fff;
    float: left;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 14px;
    line-height: 30px;
    text-indent: 1em;
    /* text-align: center; */
  }
  .xx2{
    width: 200px;
    height:30px;
    background-color:#F2F2F2;
    float: left;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
  }
  .xx11{
    width: 200px;
    height:30px;
    background-color:#F2F2F2;
    float: left;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
  }
  .xx1{
    width: 200px;
    height:30px;
    background-color:#fff;
    float: left;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 14px;
    line-height: 30px;
    text-indent: 1em;
    /* text-align: center; */
  }
  .xx{
    width: 200px;
    height:30px;
    background-color:#F2F2F2;
    float: left;
    border: 1px solid black;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
  }
  /deep/.el-dialog__header {
    padding: 10px 20px 10px;
    border-bottom: 1px  solid grey;
  }
  /deep/.el-menu-item.is-active {
    color: #FF6633;
    font-size: 24px;
    background-color: pink;
  }
  .two_my_bidding_content{
    margin-left: 10px;
    width: 99%;
  }
  .two_my_bidding_title{
    line-height: 100px;
    width: 100%;
    height: 100px;
  }
</style>
